<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div class="p-2">
    <div class="flex">
      <div class="p4 b-1 b-#cccccc b-solid w-78% mr-4">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="boder-right">
              <div class="pb4">转换量统计</div>
              <div class="text-center font-size-6">{{ datas.totalCount }}<span class="font-size-4 ml1">次</span></div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="text-center">
              <div class="font-size-4 pb4">CAD转换</div>
              <div class="font-size-6">{{ datas.cadCount }}<span class="font-size-4 ml1">次</span></div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="text-center">
              <div class="font-size-4 pb4">CAE输入转换</div>
              <div class="font-size-6">{{ datas.caeInputCount }}<span class="font-size-4 ml1">次</span></div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="text-center">
              <div class="font-size-4 pb4">CAE输出转换</div>
              <div class="font-size-6">{{ datas.caeOutputCount }}<span class="font-size-4 ml1">次</span></div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="p4 b-1 b-#cccccc b-solid w-20%">
        <div class="pb4">文件统计</div>
        <div class="text-center font-size-6">{{ datas.fileCount }}<span class="font-size-4 ml1">份</span></div>
      </div>
    </div>
    <div class="flex mt4">
      <div class="w-49%">
        <div class="b-1 b-#cccccc b-solid top-graph mb4 pos-relative">
          <el-date-picker
            v-model="dateRange1"
            class="z-9"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            :disabled-date="disabledDate"
            @change="drawTopGraph(topChart)"
          ></el-date-picker>
          <div ref="topGraphChartContainer" class="w100% h100%"></div>
        </div>
        <div class="b-1 b-#cccccc b-solid bottom-graph flex">
          <div ref="bottomLeftGraphChartContainer" class="w50% h100%"></div>
          <div ref="bottomRightGraphChartContainer" class="w50% h100%"></div>
        </div>
      </div>
      <div class="b-1 b-#cccccc b-solid ml4 w-49%">
        <el-row :gutter="20">
          <el-col :span="24" class="m-1 font-size-3.5">转换情况统计</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" class="pie-graph">
            <div ref="graphChartContainer1" class="w100% h100%"></div>
          </el-col>
          <el-col :span="12" class="pie-graph">
            <div ref="graphChartContainer2" class="w100% h100%"></div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" class="pie-graph">
            <div ref="graphChartContainer3" class="w100% h100%"></div>
          </el-col>
          <el-col :span="12" class="pie-graph">
            <div ref="graphChartContainer4" class="w100% h100%"></div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" class="pie-graph">
            <div ref="graphChartContainer5" class="w100% h100%"></div>
          </el-col>
          <el-col :span="12" class="pie-graph">
            <div ref="graphChartContainer6" class="w100% h100%"></div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup name="CaxDataConversionMajorComponent" lang="ts">
import { statistic, statisticByDate } from '@/api/caxDataConversionMajorComponent/home/index';
import { parseTime } from '@/utils/ruoyi';
import { toFormData } from 'axios';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
const topGraphChartContainer = ref(null);
const bottomLeftGraphChartContainer = ref(null);
const bottomRightGraphChartContainer = ref(null);
const graphChartContainer1 = ref(null);
const graphChartContainer2 = ref(null);
const graphChartContainer3 = ref(null);
const graphChartContainer4 = ref(null);
const graphChartContainer5 = ref(null);
const graphChartContainer6 = ref(null);
const date1 = parseTime(new Date(), '{y}-{m}-{d}');
const date = new Date().getTime() - 6 * 24 * 60 * 60 * 1000;
const date2 = parseTime(date, '{y}-{m}-{d}');
const dateRange1 = ref<[DateModelType, DateModelType]>([date2, date1]);
const datas = reactive({
  totalCount: 0,
  cadCount: 0,
  caeInputCount: 0,
  caeOutputCount: 0,
  fileCount: 0,
  cadInputTypeRatioList: [],
  cadOutputTypeRatioList: [],
  caeInputInputTypeRatioList: [],
  caeInputOutputTypeRatioList: [],
  caeOutputInputTypeRatioList: [],
  caeOutputOutputTypeRatioList: [],
  inputTypeTopList: [],
  outputTypeTopList: []
});
let topChart = null;
let bottomLeftChart = null;
let bottomRightChart = null;
let chart1 = null;
let chart2 = null;
let chart3 = null;
let chart4 = null;
let chart5 = null;
let chart6 = null;
const drawTopGraph = async (myChart) => {
  const obj = {
    startTime: dateRange1.value[0],
    endTime: dateRange1.value[1]
  };
  const res = await statisticByDate(obj);
  const xAxisDatas = Object.keys(res.data);
  const seriesData1 = [];
  const seriesData2 = [];
  const seriesData3 = [];
  for (const key in res.data) {
    const data = res.data[key];
    seriesData1.push(data[0].count);
    seriesData2.push(data[1].count);
    seriesData3.push(data[2].count);
  }
  let topGraphOption: EChartsOption = {
    title: {
      text: '转换工作量统计',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['CAD转换', 'CAE输入', 'CAE输出'],
      top: '50px'
    },
    grid: {
      top: '25%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisDatas
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'CAD转换',
        type: 'line',
        smooth: true,
        label: {
          show: true,
          position: 'top'
        },
        data: seriesData1
      },
      {
        name: 'CAE输入',
        type: 'line',
        smooth: true,
        label: {
          show: true,
          position: 'top'
        },
        data: seriesData2
      },
      {
        name: 'CAE输出',
        type: 'line',
        smooth: true,
        label: {
          show: true,
          position: 'top'
        },
        data: seriesData3
      }
    ]
  };
  topGraphOption && myChart.setOption(topGraphOption);
};
const drawBottomLeftGraph = (myChart) => {
  datas.inputTypeTopList.sort((a, b) => a.count - b.count);
  const yAxisDatasLeft = datas.inputTypeTopList.map((item) => item.type);
  const datasLeft = datas.inputTypeTopList.map((item) => item.count);
  //
  let bottomGraphOption: EChartsOption = {
    title: {
      text: '输入模型格式TOP5',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: yAxisDatasLeft
    },
    series: [
      {
        name: '输入模型格式TOP5',
        type: 'bar',
        data: datasLeft
      }
    ]
  };
  bottomGraphOption && myChart.setOption(bottomGraphOption);
};
const drawBottomRightGraph = (myChart) => {
  datas.outputTypeTopList.sort((a, b) => a.count - b.count);
  const yAxisDatasRight = datas.outputTypeTopList.map((item) => item.type);
  const datasRight = datas.outputTypeTopList.map((item) => item.count);
  let bottomGraphOption: EChartsOption = {
    title: {
      text: '输出模型格式TOP5',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: yAxisDatasRight
    },
    series: [
      {
        name: '输出模型格式TOP5',
        type: 'bar',
        data: datasRight
      }
    ]
  };
  bottomGraphOption && myChart.setOption(bottomGraphOption);
};
const drawPieGraph = (chart, title, data) => {
  const pieData = data.map((item) => {
    return {
      name: item.type,
      value: item.count
    };
  });
  let graphOption: EChartsOption = {
    title: {
      text: title,
      left: 'center',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: title,
        type: 'pie',
        radius: '50%',
        data: pieData,
        label: {
          show: true,
          formatter: '{b} {c}次 {d}%'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  graphOption && chart.setOption(graphOption);
};
const initData = async () => {
  const { data } = await statistic();
  for (const key in datas) {
    datas[key] = data[key];
  }
};
const resizeChart = () => {
  if (topChart) {
    topChart.resize();
  }
  if (bottomLeftChart) {
    bottomLeftChart.resize();
  }
  if (bottomRightChart) {
    bottomRightChart.resize();
  }
  if (chart1) {
    chart1.resize();
  }
  if (chart2) {
    chart2.resize();
  }
  if (chart3) {
    chart3.resize();
  }
  if (chart4) {
    chart4.resize();
  }
  if (chart5) {
    chart5.resize();
  }
  if (chart6) {
    chart6.resize();
  }
};
onMounted(async () => {
  await initData();
  topChart = echarts.init(topGraphChartContainer.value);
  drawTopGraph(topChart);
  bottomLeftChart = echarts.init(bottomLeftGraphChartContainer.value);
  drawBottomLeftGraph(bottomLeftChart);
  bottomRightChart = echarts.init(bottomRightGraphChartContainer.value);
  drawBottomRightGraph(bottomRightChart);
  // 图1
  chart1 = echarts.init(graphChartContainer1.value);
  drawPieGraph(chart1, 'CAD转换输入模型占比', datas.cadInputTypeRatioList);
  // 图2
  chart2 = echarts.init(graphChartContainer2.value);
  drawPieGraph(chart2, 'CAD转换输出模型占比', datas.cadOutputTypeRatioList);
  // 图3
  chart3 = echarts.init(graphChartContainer3.value);
  drawPieGraph(chart3, 'CAE输出转换输入模型占比', datas.caeOutputInputTypeRatioList);
  // 图4
  chart4 = echarts.init(graphChartContainer4.value);
  drawPieGraph(chart4, 'CAE输出转换输出模型占比', datas.caeOutputOutputTypeRatioList);
  // 图5
  chart5 = echarts.init(graphChartContainer5.value);
  drawPieGraph(chart5, 'CAE输入转换输入模型占比', datas.caeInputInputTypeRatioList);
  // 图6
  chart6 = echarts.init(graphChartContainer6.value);
  drawPieGraph(chart6, 'CAE输入转换输出模型占比', datas.caeInputOutputTypeRatioList);
  window.addEventListener('resize', resizeChart);
});
const disabledDate = (val) => {
  const time = val.getTime();
  const today = new Date();
  today.setHours(23, 59, 59, 0);
  const currentTime = today.getTime();
  const oneMothAgo = currentTime - 30 * 24 * 60 * 60 * 1000;
  return time > currentTime || time < oneMothAgo || time === currentTime;
};
onUnmounted(() => {
  window.removeEventListener('resize', resizeChart);
});
</script>
<style lang="scss" scoped>
.boder-right {
  border-right: 1px solid #cccccc;
}
.top-graph {
  height: calc(50vh - 120px);
}
.bottom-graph {
  height: calc(50vh - 120px);
}
:deep(.el-range-editor.el-input__wrapper) {
  position: absolute;
  left: calc(100% - 365px);
  top: 12px;
}
.pie-graph {
  height: calc(30vh - 50px);
}
</style>
